/**
 * 这里编写 sass 之后，可在 vue 的 style 标签中通过 @import 相对路径引入
 * 注意 style 标签的 lang 属性需要设置为 scss/sass
 */
@import "./main";
@import "./yaoxie";

/*
=======            =======
        全局基本尺寸
=======            =======
*/
$px:2px;

/*
=======            =======
          主题颜色
=======            =======
*/

/*
=======            =======
          标准
=======            =======
*/
$f-c-app:#333333;//黑色
$f-s-app:30px;//标准字体
$margin-app:25px; //间距标准


$th-color: #F4BA1D; //主颜色00a65a
$th-white-color:#CCFFCC;
$th-color-white:#fff;//白色
$th-color-l-white:#f4f4f4;//浅白色

$th-color-green:#39b54a;//绿色

$th-color-blue:#1DA1F2;//蓝色

$th-color-gray:#666666;//灰色

$th-color-l-gray:#f6f6f6;//浅灰色

$th-color-red:#ff0000;//红色





/*
=======            =======
         字体颜色
=======            =======
*/
$fc-white: $th-color-white;//白色字体
$fc-gray:#999999;//灰色
$fc-d-gray:#333333;//深灰色
$fc-l-gray:#ddd;//浅灰色
$fc-black:#000000; //黑色
$fc-s-gray:#888888; //字体灰
$fc-green:$th-color-green;//绿色

$fc-black:#333333;//黑色
$fc-white: $th-color-white;//白色字体
$f-c-999:#999999;//灰色
$f-c-333:#333333;//深灰色
$f-c-666:#666666;//深灰色
$f-c-999:#999999;//深灰色
$f-c-ddd:#dddddd;//浅灰色
$f-c-000:#000000; //黑色
$f-c-888:#888888; //字体灰

$fc-red:$th-color-red;//红色



/*
=======            =======
          字体尺寸
=======            =======
*/
$fs-xxs:20px;//超小字体

$fs-xs:24px;//小字体

$fs-sm:28px;//偏小字体

$fs-md:32px;//中等字

$fs-sd:30px;//标准字体

$fs-lg:42px;//大字体

$fs-blg:52px;//超大字体


$f-20:20px;//超小字体

$f-24:24px;//小字体

$f-28:28px;//偏小字体

$f-32:32px;//中等字

$f-30:30px;//标准字体

$f-42:42px;//大字体

$f-52:52px;//超大字体

/*
=======            =======
         边框颜色
=======            =======
*/
$border-color-l-gray:#ddd;


/*
=======            =======
         边框尺寸
=======            =======
*/
$border-width-sm: $px / 2;
$border-width-md: $px;
$border-width-lg: 2 * $px;

/*
=======            =======
         内边框尺寸
=======            =======
*/
$padding-width-xs: $px * 4;
$padding-width-sm: $px * 5;
$padding-width-md: 15px;
$padding-width-lg: 25px;
$padding-width-lgx: $px * 15;

/*
=======            =======
         外边距尺寸
=======            =======
*/
$margin-length-xs: $px * 4;
$margin-length-sm: $px * 5;
$margin-length-md: $px * 8;
$margin-length-lg: 25px;
$margin-25:25px;


/**
 *基础布局
 */
.flex-row{
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flex-row-sb{
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-row-center{
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-row-end{
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content:flex-end;
}

.flex-column{
  flex-direction: column;
  display: flex;
  align-items: center;

}
.flex-column-sb{
  flex-direction: column;
  display: flex;
  justify-content: space-between;
}
.flex-column-center{
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-column-end{
  flex-direction: column;
  display: flex;
  justify-content: end;
}
.green-background{
  background-color: #01a65a;
}
.white-background{
  background-color: white;
}
.gray-background{
  background-color: #999;
}
.gray-light-background{
  background-color: #f2f2f2;
}
.app {
  width: 750px;
  flex: 1;
}

.container{
  width: 750px;
  background-color: #f4f4f4;
}

.container-main{
  width: 750px;
  padding-right: 25px;
  padding-left: 25px;
}

.button-big {
  width: 400px;
  height: 90px;
  margin-top: 60px;
  font-size: 34px;
  padding-top: 25px;
  border-width: 2px;
}

.button-small {
  width: 180px;
  height: 80px;
  margin-top: 30px;
  font-size: 32px;
  padding-top: 18px;
  border-width: 1px;
}

.label {
  width: 500px;
  height: 80px;
  /*top: 70px;*/
  margin-top: 40px;
  font-size: 34px;
  text-align: center;
  color: #7d7d7d;
  font-weight: 500;
}

.layout {
  width: 500px;
  height: 80px;
  margin-top: 50px;
  padding-left: 10px;
  color: #000000;
  font-size: 34px;
  border-width: 1px;
  border-radius: 12px;
}

.panel {
  background-color: $th-color-white;
  width: 700px;
  height: 100px;
  padding-left: 24px;
  justify-content: center;
  border-bottom-width: 1px;
  border-bottom-color: #b9b9b9;
  border-style: solid;
}

.text {
  font-size: 30px;
  color: #7d7d7d;
  font-weight: 400;
}

.arrt-name {
  font-weight: 700;
}

.touch-bar {
  height: 68px;
  width: 750px;
}

.theme-yxq{
  background-color: $th-color-green;
}

.theme-erp{
  background-color: $th-color-blue;
}

.yx-input-right{
  padding-right: 50px;
}

.w-750{
  width: 750px;
}

.f-16{
  font-size: 16px;
}
.f-20{
  font-size: 20px;
}

.f-22{
  font-size: 22px;
}

.f-24{
  font-size: $fs-xs;
}

.f-26{
  font-size: 26px;
}

.f-28{
  font-size: $fs-sm;
}

.f-30{
  font-size: $fs-sd;
}

.f-32{
  font-size: 32px;
}
.f-36{
  font-size: 36px;
}

.f-40{
  font-size: 40px;
}
.f-50{
  font-size: 50px;
}
f-w-1{
  font-weight: 100;
}

f-w-2{
  font-weight: 200;
}

.f-w-3{
  font-weight: 300;
}

.f-w-4{
  font-weight: 400;
}

.f-w-5{
  font-weight: 500;
}
.f-w-6{
  font-weight: 600;
}
.f-w-7{
  font-weight: 700;
}
.f-w-8{
  font-weight: 800;
}
.f-c-333{
  color: $fc-d-gray;
}

.f-c-999{
  color: $fc-gray;
}

.f-c-666{
  color: #666;
}

.f-c-ff0000{
  color: #ff0000;
}
.f-c-red{
  color: #ff0000;
}
.f-c-money{
  color: #f37b1d;
}
.f-c-orange{
  color:#f37b1d;
}
.f-c-fff{
  color: #fff;
}

.f-c-green{
  color: $th-color;
}
.f-c-white{
  color: white;
}


.bd-b{
  border-bottom-width: $border-width-sm;
  border-bottom-color: $fc-l-gray;
}
.bd-t{
  border-top-color: $fc-l-gray;
  border-top-width: $border-width-sm;
}

.bar{
  padding-top: $padding-width-lg;
  padding-bottom: $padding-width-lg;
  padding-left: $padding-width-lg;
  padding-right: $padding-width-lg;
  flex-direction: row;
  justify-content: space-between;
  background-color: $th-color-white;
  align-items: center;
}
.input-cursor{
  tint-color: black;
}

.img-placeholder{
  background-color:#f0f0f0;

}
.common-head{
  width: 750px;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 10px;
  background-color: white;
}

.msg-num {
  /*height: 40px;*/
  /*width: 50px;*/
  background-color: red;
  border-radius: 30px;
  color: white;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 18px;
}

.footer-cell-btns{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 25px;
  padding-right: 25px;

}
.footer-cell-btn{
  width: 300px;
  height: 90px;
}


.list {
  width: 750px;
  flex: 1
}
